<template>
	<div class="data_title">
		<i class="iconfont icon-shujukanban"></i>
		<h2>贴士列表</h2>
	</div>
	<el-table
		:data="tableData"
		style="width: 80%"
		:row-class-name="tableRowClassName"
		@cell-mouse-leave="cellMouseLeave"
		@cell-mouse-enter="cellMouseEnter"
		:span-method="objectSpanMethod"
	>
		<el-table-column prop="id" label="序号" width="80" type=index />
		<el-table-column prop="mark" label="检测类型" width="120" />
		<el-table-column prop="name" label="分数区间" width="120" />
		<el-table-column prop="user" label="健康建议"	width="380"	:show-overflow-tooltip="true"
		/>
		<el-table-column prop="date" label="小贴士" :show-overflow-tooltip="true" />
		<el-table-column fixed="right" label="操作" width="80">
			<template #default>
				<el-button type="text" size="small" @click="showDialog()"
					>修改</el-button
				>
			</template>
		</el-table-column>
	</el-table>
	<!-- 	v-model="dialogVisible" -->
	<el-dialog		 v-model="visible"
		title="小贴士修改"
		width="30%"
		:before-close="handleClose"
		@close-auto-focus="handleCloseAutoFocus"
	>
		<div class="dialog-row">
			<span>检测类型：</span>
			<span class="dialog-label">{{tableData[0].mark}}</span>
			<span>分数区别：</span>
			<span>{{tableData[0].name}}</span>
		</div>
		按下确认键，会将对应的数据更新到小贴士列表上
		<el-input
			v-model="input1"
			class="w-50 m-2"
			size="large"
			placeholder="请输入新的健康建议"
		></el-input>
		<el-input
			v-model="input1"
			class="w-50 m-2"
			size="large"
			placeholder="请输入新的小贴士"
		></el-input>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="dialogVisible = false"
					>确认</el-button
				>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
// import mybus from "../utils/event";
const visible = ref(false);

//vue3中的方法的描写

// onMounted(() => {
// 	mybus.on("tips", (data) => {
// 		console.log(data);
// 	});
// });

// onUnmounted(() => {
// 	mybus.off("tips");
// });

const tableData = [
	{
		id: "1",
		name: "100-90",
		user: "严重超重、容易导致不良体态哦",
		date: "及时整理书本哦，用不到的书本可以放在学校或者家里",
		mark: "背包负重",
	},
	{
		id: "2",
		name: "90-80",
		user: "严重超重、容易导致不良体态哦",
		date: "及时整理书本哦，用不到的书本可以放在学校或者家里",
		mark: "背包负重",
	},
	{
		id: "3",
		name: "80-70",
		user: "严重超重、容易导致不良体态哦",
		date: "及时整理书本哦，用不到的书本可以放在学校或者家里",
		mark: "背包负重",
	},
	{
		id: "4",
		name: "70-60",
		user: "严重超重、容易导致不良体态哦",
		date: "及时整理书本哦，用不到的书本可以放在学校或者家里",
		mark: "背包负重",
	},
	{
		id: "5",
		name: "60以下",
		user: "严重超重、容易导致不良体态哦",
		date: "及时整理书本哦，用不到的书本可以放在学校或者家里",
		mark: "背包负重",
	},
	{
		id: "6",
		name: "100-90",
		user: "轻微双肩不平衡，及时改正哦",
		date: "注意调节肩带长度，用彩虹织带调节刻度，止滑扣固定，正确背负书包平衡的第一步",
		mark: "左右肩平衡",
	},
	{
		id: "7",
		name: "90-80",
		user: "轻微双肩不平衡，及时改正哦",
		date: "注意调节肩带长度，用彩虹织带调节刻度，止滑扣固定，正确背负书包平衡的第一步",
		mark: "左右肩平衡",
	},
	{
		id: "8",
		name: "80-70",
		user: "轻微双肩不平衡，及时改正哦",
		date: "注意调节肩带长度，用彩虹织带调节刻度，止滑扣固定，正确背负书包平衡的第一步",
		mark: "左右肩平衡",
	},
	{
		id: "9",
		name: "70-60",
		user: "轻微双肩不平衡，及时改正哦",
		date: "注意调节肩带长度，用彩虹织带调节刻度，止滑扣固定，正确背负书包平衡的第一步",
		mark: "左右肩平衡",
	},
	{
		id: "10",
		name: "60以下",
		user: "轻微双肩不平衡，及时改正哦",
		date: "注意调节肩带长度，用彩虹织带调节刻度，止滑扣固定，正确背负书包平衡的第一步",
		mark: "左右肩平衡",
	},
	{
		id: "11",
		name: "100-90",
		user: "admin",
		date: "2016-05-03",
		mark: "背部姿态",
	},
	{
		id: "12",
		name: "90-80",
		user: "admin",
		date: "2016-05-03",
		mark: "背部姿态",
	},
	{
		id: "13",
		name: "80-70",
		user: "admin",
		date: "2016-05-03",
		mark: "背部姿态",
	},
	{
		id: "14",
		name: "70-60",
		user: "admin",
		date: "2016-05-03",
		mark: "背部姿态",
	},
	{
		id: "15",
		name: "60分以下",
		user: "admin",
		date: "2016-05-03",
		mark: "背部姿态",
	},
];


onMounted(() => {
	getSpanArr(tableData);
});

// visible.value = false;
// const score = ref(0)
const showDialog = ()=>{
visible.value = true;
// console.log(id);
// score.value = tableData[index];
// tableData[index] = id-1
// 下标相等
// console.log(this.tableDate[index]);
}
let OrderObj = [];
const getSpanArr = (list) => {
	let pos = 0;
	for (let i = 0; i < list.length; i++) {
		if (i === 0) {
			OrderObj.push(1);
			pos = 0;
		} else {
			// 判断当前元素与上一个元素是否相同
			if (list[i].mark === list[i - 1].mark) {
				OrderObj[pos] += 1;
				OrderObj.push(0);
			} else {
				OrderObj.push(1);
				pos = i;
			}
		}
	}
};

// 合并行
const objectSpanMethod = ({ rowIndex, columnIndex }) => {
	if (columnIndex === 1) {
		const _row = OrderObj[rowIndex];
		const _col = _row > 0 ? 1 : 0;
		return {
			rowspan: _row, // 合并的行数
			colspan: _col, // 合并的列数，设为０则直接不显示
		};
	}
};


// 单元格样式
/* const tableRowClassName=({row,rowIndex})=> {
        let arr = this.hoverOrderArr
        for (let i = 0; i < arr.length; i++) {
          if (rowIndex == arr[i]) {
            return 'hovered-row'
          }
        }
      } */

// 鼠标划入，划出效果
/* let rowIndex='-1';
const cellMouseEnter=(row, column, cell, event)=> {
        rowIndex = row.rowIndex;
        this.hoverOrderArr = [];
        this.OrderIndexArr.forEach(element => {
            if (element.indexOf(this.rowIndex) >= 0) {
              this.hoverOrderArr = element
            }
        })
      }

const cellMouseLeave=(row, column, cell, event)=> {
        this.rowIndex = '-1'
        this.hoverOrderArr = [];
      } */
</script>

<style>
.bt_add {
	position: absolute;
	right: 22%;
	top: 20px;
}

.dialog-row {
	display: block;
	height: 30px;
}

.dialog-label {
	margin-right: 50px;
}
.row01 {
	background-color: aqua !important;
}
.row02 {
	background-color: brown !important;
}
.row03 {
	background-color: coral !important;
}

.el-table .warning-row {
	--el-table-tr-bg-color: var(--el-color-warning-light-9);
	background-color: brown !important;
}
.el-table .success-row {
	--el-table-tr-bg-color: var(--el-color-success-light-9);
	background-color: aqua !important;
}
</style>
